<template>
  <div class="b-table">
    <div class="b-title">{{title}}</div>
    <div class="b-table-content">
      <div class="b-table-row ">
        <div class="b-table-cell b-table-cell20">监测点</div>
        <div class="b-table-cell b-table-cell20">工程名称</div>
        <div class="b-table-cell b-table-cell35">报警位置</div>
        <div class="b-table-cell b-table-cell25">报警时间</div>
      </div>
      <div class="b-table-row" v-for="item,index in tableData" :class="index%2?'':'b-table-back'">
        <div class="b-table-cell b-table-cell20" :title="item.equipName">{{item.equipName}}</div>
        <div class="b-table-cell b-table-cell20" :title="item.projectName">{{item.projectName}}</div>
        <div class="b-table-cell b-table-cell35" :title="`${item.address}${item.installPosition}`">{{item.address}}{{item.installPosition}}</div>
        <div class="b-table-cell b-table-cell25" :title="item.time">{{item.time}}</div>
      </div>

      <div class="b-table-empty b-table-back" v-if="tableData.length==0">
        暂无数据
      </div>
    </div>
      <el-pagination
          small
          :page-size="pageSize"
          layout="prev, pager, next"
          @current-change="changePageNo"
          :total="total">
      </el-pagination>

  </div>
</template>

<script>

  export default {
    name: "b-table",
    props: {
      title:{
        type:String,
        default:'报警传感器工程信息'
      }
    },
    components: {},
    data() {
      return {
        pageNo:1,
        pageSize:5,
        tableData: [],
        total:5
      }
    },
    methods: {
      changeTableData(data,total){
        this.tableData=data;
        this.total=total;
        console.log(total)
      },
      changePageNo(val){
        if(val){
          this.pageNo=val;
        }

        this.$emit('current-change',this.pageNo)
      }
    },
    created(){},
    mounted(){
    }
  }
</script>

<style lang="scss" scoped>

  .b{


    &-title{
      font-weight: bold;
      font-size: 1.1rem;

      white-space: nowrap;

    }

    &-table{
      padding: 20px 28px 10px;
      background: $border-1;
      border-radius: 10px;

      display: flex;
      flex-direction: column;


      &-content{
        flex: 1;

        /*display: flex;*/
        /*flex-direction: column;*/
        padding: 10px 0 0;
      }

      &-row{
        display: flex;
        white-space: nowrap;
        overflow: hidden;

        font-size:0.8rem;
        height: 16.6%;
        line-height: normal;

        align-items: center;

      }

      &-empty{

        width: 100%;
        height: 83%;
        display: flex;
        font-size: 0.8rem;


        justify-content: center;
        align-items: center;
      }


      &-back{
        background: $back-1;
      }

      &-cell{
        padding: 0 10px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }


      &-cell20{
        width:20%;
      }

      &-cell25{
        width: 25%;
      }

      &-cell35{
        width:35%;
      }
    }
  }

</style>